<template>
  <div>
    <div class="personal-header">
      <!-- <div class="personal-header-fm">
        <div class="personal-header-icon">
          <span class="icon-收音机"></span>
        </div>
        <span>私人FM</span>
      </div> -->
      <div @click="recommendSongs" class="personal-header-songs">
        <div>
          {{ new Date().getDate() }}
        </div>
        <span>每日歌曲推荐</span>
      </div>
      <div @click="goHotList" class="personal-header-hot">
        <div>
          <span class="icon-排行榜"></span>
        </div>
        <span>云音乐热歌榜</span>
      </div>
    </div>
    <section class="advice-songList-wrap session">
      <div class="advice-header">
        <span class="icon-日推"></span>
        <span class="advice-title">推荐歌单</span>
        <span @click="more">更多</span>
        <span class="icon-右键"></span>
      </div>
      <div class="advice-songList-box">
        <div
          v-for="item in songList"
          :key="item.id"
          @click="goListContent(item.id)"
          class="advice-songList"
        >
          <img v-lazy="item.picUrl" alt="" />
          <span class="advice-songList-count">
            <span class="icon-耳机"></span>
            <span v-if="item.playCount > 100000">
              {{ Math.floor(item.playCount / 10000) }}万
            </span>
            <span v-else>
              {{ item.playCount }}
            </span>
          </span>
          <div>{{ item.name }}</div>
        </div>
      </div>
    </section>
    <section class="session">
      <div class="advice-header">
        <span class="icon-专辑"></span>
        <span class="advice-title">最新音乐</span>
        <span @click="moreAlbum">更多</span>
        <span class="icon-右键"></span>
      </div>
      <div class="each-new-music-wrap">
        <div
          v-for="item in newAlbums"
          :key="item.id"
          @click="toAlbumMsg(item.id)"
          class="each-new-music"
        >
          <img v-lazy="item.picUrl" alt="" />
          <div class="each-new-music-name">{{ item.name }}</div>
          <div class="each-new-music-artists">
            <span v-for="(artist, index) in item.artists" :key="artist.id"
              >{{ artist.name
              }}<span v-if="index < item.artists.length - 1">/</span></span
            >
          </div>
        </div>
      </div>
    </section>
    <section class="advice-songList-wrap session">
      <div class="advice-header">
        <span class="icon-视频"></span>
        <span class="advice-title">推荐MV</span>
        <span @click="moreMV">更多</span>
        <span class="icon-右键"></span>
      </div>
      <div class="advice-songList-box">
        <div
          v-for="item in MVList"
          :key="item.id"
          @click="getMvUrl(item.id)"
          class="advice-songList"
        >
          <img v-lazy="item.picUrl" alt="" />
          <span class="advice-songList-count">
            <span class="icon-视频"></span>
            <span v-if="item.playCount > 100000">
              {{ Math.floor(item.playCount / 10000) }}万
            </span>
            <span v-else>
              {{ item.playCount }}
            </span>
          </span>
          <div>{{ item.name }}</div>
          <span
            class="each-mv-artists"
            v-for="(artist, index) in item.artists"
            :key="artist.id"
            >{{ artist.name
            }}<span v-if="index < item.artists.length - 1">/</span></span
          >
        </div>
      </div>
    </section>
  </div>
</template>

<script lang="ts">
import { APIType } from "@/api";
import { Album, MusicInfo, MVInfo } from "@/model/music-info.model";
import { namespace } from "vuex-class";
import { Vue, Component } from "vue-property-decorator";
import Router from "vue-router";
import { CommonIdType } from "@/model/id-or-enum.model";
const AppModule = namespace("app");
@Component({})
export default class PersonalAdviceComponent extends Vue {
  // 推荐歌单
  songList: MusicInfo[] = [];
  // 最新专辑
  newAlbums: Album[] = [];
  // 推荐MV
  MVList: MVInfo[] = [];
  // 作用未知
  MVURL: string = null;
  $api: APIType;
  $router: Router;
  @AppModule.Mutation("setMvId")
  public setMvId: (id: CommonIdType) => void;
  public created() {
    this.$api.getPersonalized().then((res) => {
      this.songList = res?.result;
    });
    this.$api.getTopAlbumList(0, 6).then((res) => {
      this.newAlbums = res.weekData;
    });
    this.$api.getPersonalizedMV().then((res) => {
      this.MVList = res;
    });
  }
  goListContent(id: CommonIdType) {
    // console.log(`/playList/${ind}`)
    this.$router.push({ path: `/playList/${id}` }).catch((err) => err);
  }

  toAlbumMsg(id: CommonIdType) {
    this.$router.push({ path: `/album/${id}` }).catch((err) => err);
  }
  moreAlbum() {
    this.$router.push({ path: "/albumList" }).catch((err) => err);
  }
  recommendSongs() {
    this.$router.push({ path: `/recommendSongs` }).catch((err) => err);
  }
  goHotList() {
    this.$router.push({ path: "/listContent/1" }).catch((err) => err);
  }
  more() {
    this.$router.push({ path: "/musicLibrary/songList" }).catch((err) => err);
  }
  getMvUrl(id: CommonIdType) {
    this.setMvId(id);
    this.$router.push({ path: `/mv/${id}` }).catch((err) => err);
  }
  moreMV() {
    this.$router.push({ path: "/mvLibrary" }).catch((err) => err);
  }
}
</script>

<style lang="scss">
.personal-header {
  display: flex;
  padding: 0.4rem 0 0 0;
  > div {
    flex: 1;
    text-align: center;
    color: #333;
    border-bottom: 1px solid #d9dbdc;
    > div {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto;
      margin-bottom: 0.1rem;
      border: 2px solid #ce3d3e;
      width: 1rem;
      height: 1rem;
      font-size: 0.5rem;
      color: #ce3d3e;
      border-radius: 50%;
    }
    > span {
      display: block;
      margin-bottom: 0.2rem;
      color: #333;
      font-size: 0.18rem;
    }
  }
}
.session {
  padding: 0 0.2rem;
}
.advice-header {
  display: flex;
  font-size: 0.2rem;
  height: 0.6rem;
  line-height: 0.6rem;
  .advice-title {
    flex: 1;
  }
  .icon-右键,
  .icon-日推,
  .icon-专辑,
  .icon-视频 {
    line-height: 0.63rem;
    margin-right: 0.1rem;
  }
}
.advice-songList-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .advice-songList {
    width: 48.5%;
    position: relative;
    margin-bottom: 0.15rem;
    font-size: 0.15rem;
    img {
      width: 100%;
      overflow: hidden;
      border: 1px solid #e5e9f2;
    }
    .advice-songList-count {
      position: absolute;
      right: 0;
      top: 0;
      color: #fff;
    }
  }
}
.each-new-music-wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .each-new-music {
    width: 32%;
    margin-bottom: 0.2rem;
    img {
      width: 100%;
      border: 1px solid #e5e9f2;
    }
    .each-new-music-name,
    .each-new-music-artists {
      width: 90%;
      margin: 0 auto;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.each-new-music-artists,
.each-mv-artists {
  color: #999;
}
</style>
